<template>
    <div class="wenankueditadd">
        <h1 style="margin:20px 0;color:#2b2b2b;">编辑文本</h1>
        <div class="text_con_all_text">
            <textarea class="textarea" v-model="text" name="" placeholder="请输入文本" id=""></textarea>
        </div>
        <div class="text_queding" @click="copyToClipboard(text,$event)" type="primary">复制到剪切板</div>
        <div class="text_queding" @click="addNew(text)" type="info">+添加新文案</div>
        <el-cascader class="cascader" ref="cascader" v-show="showcascader" v-model="value" :options="options" @change="handleChange">
        </el-cascader>
        <div class="text_queding" v-show="showcascader" @click="confirmAdd">确定添加</div>
    </div>
</template>
<script>
import bus from "@/utils/bus"
import clip from '@/utils/clipboard'
import {addwenankuData} from "@/api/dtsApi";
export default {
    data(){
        return{
            text:"",
            showcascader:false,
            options:[],
            value:"",
            partyclass:require("@/assets/json/partyclass.json"),
            eplatformid:localStorage.getItem("eplatformid")*1,
        }
    },
    methods:{
        copyToClipboard(text,event){
            clip(text, event)
            // this.$message.success("成功复制到剪切板")
        },
        addNew(){
            var showcascader = this.showcascader;
            this.showcascader = !showcascader;
        },
        handleChange(value) {
            console.log(value);
        },
        confirmAdd(){
            if(!this.text){
                this.$message.error("请输入内容后再上传！");
                return;
            }
            if (this.value.length==0) {
                this.$message.error("请选中文案类型后再上传！");
                return
            }
            var partys = this.value;
            let yanhui = partys[0];
            let binke = partys[1];
            let content = this.text;
            let creator = this.eplatformid+"";
            console.log("确定添加");
            let msg = {
                act:"add",
                tid: 0,
                content:content,
                binke:binke,
                yanhui:yanhui,
                creator:creator
            }
            var formdata = new FormData();
            formdata.append("data", JSON.stringify(msg));
            addwenankuData(formdata).then(res=>{
                if(res.ok){
                    bus.$emit('addSuccess',true)
                }
            })
        }
    },
    created(){
        //  http.defaults.baseURL = "http://localhost:4000/dts";
            var partys = this.partyclass[0].party;
            let fixedChildren = partys.map(item=>{
                var children = []
                for (let index = 0; index < item.guests.length; index++) {
                    let obj = {
                        value:item.guests[index].chats,
                        label:item.guests[index].chats
                    }
                    children.push(obj)
                }
                let fixedObj ={}
                fixedObj.children = children;
                fixedObj.label = item.partyName;
                fixedObj.value = item.partyName;
                return fixedObj;
            })
            this.options = fixedChildren;
        // http.get("/partyclass.json").then(response => {
        // })
    },
    mounted(){
        bus.$off('sendMesage')
        bus.$on('sendMesage', (msg) => {
            // console.log(msg)
            // this.showcascader = true;
            var { text,binke,yanhui } = msg
            this.text = text;
            // var arr = [binke,yanhui];
            var arr = []
            arr.push(binke)
            arr.push(yanhui)
            this.value = arr;
            // this.value = ["生日宴","孩子对父母说"]
            // this.value = JSON.parse(JSON.stringify(arr))
        })
    }
}
</script>
<style lang="less" scoped>
.wenankueditadd{
    padding:20px;
    .text_con_all_text{
        width: 100%;
        overflow: hidden;
        margin-bottom: 10px;
        background: #f6f6f6;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        height: 300px;
        .textarea{
            margin: 0 0 20px 0;
            width: 100%;
            min-height: 280px;
            padding: 10px 4px;
            font-size: 20px;
            border-radius: 4px;
            background: #f6f6f6;
            resize: none;
        }
    }
    .cascader{
        width: 19vw;
    }
    .text_queding{
        background-color: #d4d4d4;
        border-radius: 17px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
        font-size: 18px;
        width: 19vw;
        border-radius: 18px;
        color: #000;
    }
}
</style>